<!--  
 +---------------------------------------------------------------------- 
 | 狂团[kt8.cn]旗下KtAdmin是为独立版SAAS系统而生的快速开发框架. 
 +---------------------------------------------------------------------- 
 | [KtAdmin] Copyright (c) 2022 http://ktadmin.cn All rights reserved. 
 +---------------------------------------------------------------------- 
 | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) 
 +----------------------------------------------------------------------  
--> 

<template>
	<div class="contentCenter">
		
		<div>
			<el-table :data="opendata.tableData" style="width: 100%" row-style="padding:20px">
				<!-- <el-table-column prop="id" label="id" width="80" /> -->
				<el-table-column prop="name" label="应用logo" width="">
					<template #default="scope"
						><span
							><img
								:src="scope.row.app_logo"
								style="width: 50px; height: 50px; display: inline-block; vertical-align: middle; margin-right: 5px"
						/></span>
						<!-- <span style="line-height: 25px">{{ scope.row.name }}</span> -->
					</template>
				</el-table-column>
				<el-table-column prop="name" label="应用名称"
					><template #default="scope">
						<span style="color: #409eff">{{ scope.row.app_name }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="pro_name" label="商品名称"></el-table-column>
        <el-table-column prop="price" label="价格">
          <template #default="scope">
						<span v-if=" scope.row.price != 0">{{ scope.row.price }}元</span>
            <span v-else style="color:red">免费</span>
					</template>
        </el-table-column>
        <el-table-column prop="install_num" label="安装量"></el-table-column>
				<el-table-column prop="address" label="操作">
					<template #default="scope">
						<!-- <span style="color: #409eff; cursor: pointer" @click="editapi(scope.row)">立即更新</span> -->
						<el-button type="success" round @click="editapi(scope.row)" size="small">立即安装</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- <div style="margin-top: 10px; float: right">
			<el-pagination
				v-model:currentPage="currentPage4"
				v-model:page-size="pageSize4"
				:page-sizes="[10, 20, 30, 40]"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div> -->
		<div>
			<el-dialog
				v-model="dialogVisible"
				:title="titles"
				width="30%"
				:before-close="handleClose"
				custom-class="publicDialog"
			>
				<div style="text-align: center; margin-top: 20px">
					{{titlevalue}}
					<!-- 在线更新功能由狂团云平台提供，请登录狂团后台更新系统 -->
					<!-- <span style="color: #409eff; cursor: pointer; padding-left: 7px" @click="updateapi()">立即前往</span> -->
				</div>
				<div style="text-align: center; margin-top: 20px">
					<el-button type="primary" :icon="Search" round @click="gotoapi" v-if="titles == '在线更新'">立即前往</el-button>
				</div>
			</el-dialog>
      <el-pagination
        v-model:current-page="formInline.page"
        v-model:page-size="formInline.size"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="float: right;margin-top: 10px;"
      />
		</div>
		
	</div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { appstore, postopenusebuy,postsync,postktdelete } from '@/api'
const opendata = reactive({
	tableData: []
})
const ruleFormRef = ref()
const rules = reactive({
	specsid: [{ required: true, message: '请先选择续费时长', trigger: 'blur' }]
})
const ruleForm = reactive({
	name: '',
	specsid: '',
	old_price: '',
	price: '',
	wid: '',
	id: ''
})
const deleteapi = (val)=>{
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning',
		center: true
	}).then(() => {
		postktdelete({code:val}).then(res=>{
			ElMessage({
				message: res.msg,
				type: 'success',
			})
			postOpenuseapi()
		})
	})
}
const options = ref([])
const dialogVisible = ref(false)
const formInline = reactive({
	
	page: '1',
	size: '10'
})
const titlevalue=ref('本应用使用了狂团提供的免费在线更新方案，支持在线更新')
const titles = ref('在线更新')
const synchronization=()=>{
	postsync().then(res=>{
		ElMessage({
    message: '更新成功',
    type: 'success',
  })
		postOpenuseapi()
	})
}
const total = ref(0)
const handleCurrentChange = (val) => {
	formInline.page = val
	postOpenuseapi()
}
const handleSizeChange = (val) => {
	formInline.size = val
	postOpenuseapi()
}
const renew = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			postopenusebuy({ wid: ruleForm.wid, app_id: ruleForm.id, specsid: ruleForm.specsid }).then((res) => {})
		}
	})
}
const postOpenuseapi = () => {
	appstore(formInline).then((res) => {
		opendata.tableData = res.data.item
		total.value = res.data.count
	})
}
const gotoapi = () => {
	window.open('https://www.kt8.cn/admin/Clound/buylist', '_blank')
}
postOpenuseapi()
const editapi = (val) => {
	window.open(val.view_url, '_blank')
}
const changeClick = (item) => {
	console.log(item)
	for (var i = 0; i < options.value.length; i++) {
		if (options.value[i].id == item) {
			ruleForm.old_price = options.value[i].old_price
			ruleForm.price = options.value[i].price
		}
	}
}
</script>
<style scoped>
.publicDialog {
	border-radius: 10px !important;
}
.contentCenter {
	margin: 20px;
	padding: 25px;
	/* height: 700px; */
	border-radius: 15px;
	background-color: #ffffff;
	padding-bottom: 30px;
}
</style>
